/**
 * 
 * 
 * 
 * 
 * 备忘录列表
*/

import React, { useCallback, useMemo } from 'react';
import { SwipeAction, Toast } from 'antd-mobile';
// import { Link } from 'react-router-dom';
import CommonList from '@/component/common/CommonList/CommonList';
import { getMemoList, getSaleMemoList, delMemoDetail } from '@/network/protocol';
import moment from 'moment';
import { withRouter } from "react-router-dom";
import qs from "querystring";

// const img1 = <img key={'zhongyao'} src={require('../../assests/img/zhongyao.png')} alt="" />
// const img2 = <img key={'jinji'} src={require('../../assests/img/jinji.png')} alt="" />

const span1 = <span key={'zhongyao'} className="span1">重要</span>
const span2 = <span key={'jinji'} className="span2">紧急</span>
const MemoList = (props) => {
  const { history, location, param, update, refresh } = props;

  const id = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.id
  }, [location.search])

  const imgC = useMemo(() => {
    // { label: '重要紧急', value: '0', },
    // { label: '重要不紧急', value: '1', },
    // { label: '不重要紧急', value: '2', },
    // { label: '不重要不紧急', value: '3', },
    return [
      [span1, span2], [span1], [span2], []
    ]
  }, [])



  const param1 = useMemo(() => {
    let p = {
      ...param
    }
    if (id) p.childUserId = id;
    return p
  }, [id, param])

  const method = useMemo(() => {
    if (id) return getSaleMemoList
    return getMemoList
  }, [id])

  const del = useCallback(async (data) => {
    let param = [data.id];
    try {
      let response = await delMemoDetail(param);
      if (response.errorCode === 0) {
        if (refresh) refresh();
      } else {
        Toast.fail('删除失败！')
      }
    } catch (error) {
      Toast.fail('删除失败！')
    }

  }, [refresh])

  const View = useCallback((props) => {
    let { data } = props;
    if (id) return <div className="Memo-box-item" onClick={() => history.push('/memoDetail?id=' + data.id + '&child=1')}>
      <span className="Memo-box-item-title">

        {imgC[data.memType]}
      </span>
      {/* <span className="Memo-box-item-time">{moment(data.createTime).format('YYYY-MM-DD HH:mm:ss')}</span> */}
      <span className="Memo-box-item-time">{data.title}</span>
    </div>
    return <SwipeAction
      style={{ backgroundColor: 'gray' }}
      // disabled
      autoClose
      right={[
        {
          text: 'Cancel',
          onPress: () => console.log('cancel'),
          style: { backgroundColor: '#ddd', color: 'white' },
        },
        {
          text: 'Delete',
          onPress: () => del(data),
          style: { backgroundColor: '#F4333C', color: 'white' },
        },
      ]}
    // onOpen={() => console.log('global open')}
    // onClose={() => console.log('global close')}
    >
      {/* <Link to={{ pathname : '/memoDetail?id='+data.id }}> */}
      <div className="Memo-box-item" onClick={() => history.push('/memoDetail?id=' + data.id)}>
        <span className="Memo-box-item-title">
          {data.title}
        </span>
        <span className="Memo-box-item-time">
          {imgC[data.memType]}
        </span>
        {/* <span className="Memo-box-item-time">{moment(data.createTime).format('YYYY-MM-DD HH:mm:ss')}</span> */}
      </div>
      {/* </Link> */}
    </SwipeAction>
  }, [del, history, id, imgC])

  return (
    <div className="Memo-box-item-box">
      <CommonList update={update} viewCmp={View} method={method} param={param1} />
    </div>
  )
}


export default React.memo(withRouter(MemoList)) 